<template>
  <div class="component_root">
    <div v-html="html" />
  </div>
</template>
<script>
import hljs from 'highlight.js/lib/core'
import Htmlbars from 'highlight.js/lib/languages/htmlbars'
import Handlebars from 'highlight.js/lib/languages/handlebars'
import Css from 'highlight.js/lib/languages/css'
import Shell from 'highlight.js/lib/languages/shell'
import Bash from 'highlight.js/lib/languages/bash'
import C from 'highlight.js/lib/languages/c'
import Clike from 'highlight.js/lib/languages/c-like'
import Java from 'highlight.js/lib/languages/java'
import Python from 'highlight.js/lib/languages/python'
import Cpp from 'highlight.js/lib/languages/cpp'
import Csharp from 'highlight.js/lib/languages/csharp'
import Php from 'highlight.js/lib/languages/php'
import Sql from 'highlight.js/lib/languages/sql'
import R from 'highlight.js/lib/languages/r'
import Swift from 'highlight.js/lib/languages/swift'
import Go from 'highlight.js/lib/languages/go'
import Matlab from 'highlight.js/lib/languages/matlab'
import Ruby from 'highlight.js/lib/languages/ruby'
import Perl from 'highlight.js/lib/languages/perl'
import Objectivec from 'highlight.js/lib/languages/objectivec'
import Rust from 'highlight.js/lib/languages/rust'
import Dart from 'highlight.js/lib/languages/dart'
import Delphi from 'highlight.js/lib/languages/delphi'
import D from 'highlight.js/lib/languages/d'
import Kotlin from 'highlight.js/lib/languages/kotlin'
import Scala from 'highlight.js/lib/languages/scala'
import Sas from 'highlight.js/lib/languages/sas'
import Lisp from 'highlight.js/lib/languages/lisp'
import Lua from 'highlight.js/lib/languages/lua'
import Ada from 'highlight.js/lib/languages/ada'
import Fortran from 'highlight.js/lib/languages/fortran'
import Powershell from 'highlight.js/lib/languages/powershell'
import Vbscript from 'highlight.js/lib/languages/vbscript'
import VbscriptHtml from 'highlight.js/lib/languages/vbscript-html'
import Groovy from 'highlight.js/lib/languages/groovy'
import Julia from 'highlight.js/lib/languages/julia'
import JuliaRepl from 'highlight.js/lib/languages/julia-repl'
import Haskell from 'highlight.js/lib/languages/haskell'
import Actionscript from 'highlight.js/lib/languages/actionscript'
import Scheme from 'highlight.js/lib/languages/scheme'
import Typescript from 'highlight.js/lib/languages/typescript'
import Fsharp from 'highlight.js/lib/languages/fsharp'
import Prolog from 'highlight.js/lib/languages/prolog'
import Erlang from 'highlight.js/lib/languages/erlang'
import ErlangRepl from 'highlight.js/lib/languages/erlang-repl'
import Json from 'highlight.js/lib/languages/json'
import Ini from 'highlight.js/lib/languages/ini'

import MarkdownIt from 'markdown-it'
import MarkdownItEmoji from 'markdown-it-emoji'
import MarkdownItSubscript from 'markdown-it-sub'
import MarkdownItSuperscript from 'markdown-it-sup'
import MarkdownItFootnote from 'markdown-it-footnote'
import MarkdownItDeflist from 'markdown-it-deflist'
import MarkdownItAbbreviation from 'markdown-it-abbr'
import MarkdownItInsert from 'markdown-it-ins'
import MarkdownItMark from 'markdown-it-mark'
import MarkdownItKatex from 'markdown-it-katex'
import MarkdownItTasklists from 'markdown-it-task-lists'
import MarkdownItLatex from 'markdown-it-latex'
import MarkdownItContainer from 'markdown-it-container'
import MarkdownItGithubToc from 'markdown-it-github-toc'
import MarkdownItSourceMap from 'markdown-it-source-map'

import 'github-markdown-css/github-markdown.css'
import 'highlight.js/styles/atom-one-light.css'
// import 'highlight.js/styles/tomorrow.css'
// import 'highlight.js/styles/xcode.css'
// import 'markdown-it-latex/dist/index.css'

hljs.registerLanguage('json', Json)
hljs.registerLanguage('ini', Ini)
hljs.registerLanguage('handlebars', Handlebars)
hljs.registerLanguage('htmlbars', Htmlbars)
hljs.registerLanguage('css', Css)
hljs.registerLanguage('shell', Shell)
hljs.registerLanguage('bash', Bash)
hljs.registerLanguage('c-like', Clike)
hljs.registerLanguage('c', C)
hljs.registerLanguage('cpp', Cpp)
hljs.registerLanguage('java', Java)
hljs.registerLanguage('python', Python)
hljs.registerLanguage('csharp', Csharp)
hljs.registerLanguage('php', Php)
hljs.registerLanguage('sql', Sql)
hljs.registerLanguage('r', R)
hljs.registerLanguage('swift', Swift)
hljs.registerLanguage('go', Go)
hljs.registerLanguage('matlab', Matlab)
hljs.registerLanguage('ruby', Ruby)
hljs.registerLanguage('perl', Perl)
hljs.registerLanguage('objectivec', Objectivec)
hljs.registerLanguage('rust', Rust)
hljs.registerLanguage('dart', Dart)
hljs.registerLanguage('delphi', Delphi)
hljs.registerLanguage('d', D)
hljs.registerLanguage('kotlin', Kotlin)
hljs.registerLanguage('scala', Scala)
hljs.registerLanguage('sas', Sas)
hljs.registerLanguage('lisp', Lisp)
hljs.registerLanguage('lua', Lua)
hljs.registerLanguage('ada', Ada)
hljs.registerLanguage('fortran', Fortran)
hljs.registerLanguage('powershell', Powershell)
hljs.registerLanguage('vbscript', Vbscript)
hljs.registerLanguage('vbscript-html', VbscriptHtml)
hljs.registerLanguage('groovy', Groovy)
hljs.registerLanguage('julia', Julia)
hljs.registerLanguage('julia-repl', JuliaRepl)
hljs.registerLanguage('haskell', Haskell)
hljs.registerLanguage('actionscript', Actionscript)
hljs.registerLanguage('scheme', Scheme)
hljs.registerLanguage('typescript', Typescript)
hljs.registerLanguage('fsharp', Fsharp)
hljs.registerLanguage('prolog', Prolog)
hljs.registerLanguage('erlang', Erlang)
hljs.registerLanguage('erlang-repl', ErlangRepl)

const highlightPlugin = (md) => {
  md.renderer.rules.fence = (tokens, idx) => {
    const token = tokens[idx]
    const code = token.content
    const lang = token.info
    const langObj = hljs.getLanguage(lang)
    let cnt
    if (langObj) {
      cnt = hljs.highlight(lang, code).value
    } else {
      cnt = hljs.highlightAuto(code).value
    }

    return `<pre class="hljs"><code>${cnt}</code></pre>`
  }
}

const md = new MarkdownIt()
  .use(MarkdownItEmoji)
  .use(MarkdownItSubscript)
  .use(MarkdownItSuperscript)
  .use(MarkdownItFootnote)
  .use(MarkdownItFootnote)
  .use(MarkdownItDeflist)
  .use(MarkdownItAbbreviation)
  .use(MarkdownItInsert)
  .use(MarkdownItMark)
  .use(MarkdownItKatex)
  .use(MarkdownItTasklists)
  .use(MarkdownItLatex)
  .use(MarkdownItContainer)
  .use(MarkdownItGithubToc, {
    tocFirstLevel: 2,
    tocLastLevel: 3,
    tocClassName: 'toc',
    anchorLinkSymbol: '',
    anchorLinkSpace: false,
    anchorClassName: 'anchor',
    anchorLinkSymbolClassName: 'octicon octicon-link',
  })
  .use(MarkdownItSourceMap)
  .use(highlightPlugin)

export default {
  name: 'Preview',
  props: {
    content: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      html: '',
    }
  },
  watch: {
    content(v, o) {
      this.html = md.render(v)
    },
  },
  mounted() {
    this.html = md.render(this.content)
  },
}
</script>
<style scoped lang="scss">
.component_root {
  color: rgb(56, 56, 56);
  line-height: 1.5em;

  ::v-deep {
    a {
      text-decoration: underline;
      color: #146cd1;
    }
    h1,
    h2,
    h3,
    h4,
    h4,
    h5 {
      display: block;
      width: 100%;
      padding: 10px 0;
      height: auto;
      line-height: 1em;
    }

    img {
      display: block;
      max-width: 100%;
      padding-bottom: 20px;
    }
    p {
      padding: 10px 6px;
      code {
        color: #2aad13;
        background-color: #dfdfdf;
        border-radius: 4px;
        padding: 4px;
      }
    }
    p + p {
      padding-top: 0;
    }
    .hljs {
      padding: 16px 6px;
      line-height: 1.6em;
      background-color: #e8e8e857;
      font-size: 0.9em;
    }
  }
}
</style>
